<template>
  <Card title="字段映射" :head-style="{ textAlign: 'center', fontWeight: 'bold' }">
    <Table :data-source="list" :columns="columns" :pagination="false" :showHeader="false">
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex == 'sourceField'">
          <Select
            style="width: 160px"
            :options="fields"
            v-model:value="record[column.dataIndex]"
            :field-names="{ label: 'title', value: 'name' }"
            :disabled="index != 0"
            show-search
            optionFilterProp="title"
            :getPopupContainer="(trigger) => trigger?.parentNode"
            @change="setName($event, record, 'sourceFieldNames', formGetFieldsData)"
          />
        </template>
        <template v-if="column.dataIndex == 'nestFieldTd'">
          <Select
            style="width: 160px"
            :options="formGetFieldsDataTo"
            v-model:value="record[column.dataIndex]"
            :field-names="{ label: 'title', value: 'name' }"
            :disabled="index != 0"
            show-search
            optionFilterProp="title"
            :getPopupContainer="(trigger) => trigger?.parentNode"
            @change="setName($event, record, 'nestFieldTdNames', formGetFieldsDataTo)"
          />
        </template>
        <template v-if="column.dataIndex == 'cz'">
          <a-button v-if="index == 0" @click="handleCreate(record)">添加</a-button>
          <a-button v-else @click="handleDelete(index)">删除</a-button>
        </template>
      </template>
    </Table>
  </Card>
</template>
<script lang="ts" setup>
  import { ref, watch, onMounted } from 'vue';
  import { Card, Table, Select, message } from 'ant-design-vue';
  import { isArray } from '@vue/shared';
  const emit = defineEmits(['update:modelValue']);
  const props = defineProps({
    formGetFieldsData: {
      type: Array,
      default: () => [],
    },
    formGetFieldsDataTo: {
      type: Array,
      default: () => [],
    },
    modelValue: {
      type: Array,
      default: () => [],
    },
  });
  const columns = [
    {
      dataIndex: 'sourceFieldName',
      title: '源字段名称',
      align: 'center',
    },
    {
      dataIndex: 'sourceField',
      title: '源字段',
      align: 'center',
    },
    {
      dataIndex: 'nestFieldTdName',
      title: '目标字段',
      align: 'center',
    },
    {
      dataIndex: 'nestFieldTd',
      title: '目标字段',
      align: 'center',
    },
    {
      dataIndex: 'cz',
      title: '操作',
      align: 'center',
    },
  ];
  const obj = {
    sourceFieldName: '源字段',
    sourceField: '',
    sourceFieldNames: '',
    nestFieldTdName: '目标字段',
    nestFieldTd: '',
    nestFieldTdnames: '',
    type: 'add',
  };
  const list = ref<Recordable[]>([]);
  const fields = ref<any>([]);

  watch(
    () => props.modelValue,
    (newVal) => {
      list.value = newVal as Recordable[];
      if ((isArray(list.value) && list.value.length == 0) || !isArray(list.value)) {
        list.value = [{ ...obj }];
      }
    },
    {
      immediate: true,
    },
  );

  watch(
    () => props.formGetFieldsData,
    (newVal) => {
      fields.value = newVal;
      console.log('props.formGetFieldsData', props.formGetFieldsData);
      fields.value.push({ name: 'id', title: 'ID' });
    },
    {
      immediate: true,
    },
  );

  const setEimt = () => {
    emit('update:modelValue', list.value);
  };

  const handleCreate = (record) => {
    if (!record.sourceField) {
      message.warning('源字段不能为空');
      return;
    }
    if (!record.nestFieldTd) {
      message.warning('目标字段不能为空');
      return;
    }
    const newObj = { ...obj };
    list.value.unshift(newObj);
    setEimt();
  };

  const handleDelete = (index) => {
    list.value.splice(index, 1);
    setEimt();
  };

  const handleInit = () => {
    list.value = [{ ...obj }];
    setEimt();
  };

  const setName = (val, record, col, data) => {
    if (!val) return;
    record[col] = data.find((item) => item.name == val)?.title;
  };

  defineExpose({
    handleInit,
  });
</script>
